<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Snap.svg</title>
        <style>
        body {
            background: #333;
        }
        </style>
        <script src="../../dist/snap.svg-min.js"></script>
    </head>
    <body>
        <svg width="0" height="0">
            <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
                <path d="M-5,0,10,15M0-5,15,10" stroke="white" stroke-width="5"/>
            </pattern>
        </svg>
        <script>
            var s = Snap();
            var bigCircle = s.circle(100, 100, 50);
            bigCircle.attr({
                fill: "#bada55",
                stroke: "#000",
                strokeWidth: 5
            });
            var smallCircle = s.circle(70, 100, 40);
            var discs = s.group(smallCircle, s.circle(130, 100, 40));
            discs.attr({
                fill: Snap("#pattern")
            });
            bigCircle.attr({
                mask: discs
            });
            Snap.load("mascot.svg", function (f) {
                var g = f.select("g");
                f.selectAll("polygon[fill='#09B39C']").attr({
                    fill: "#fc0"
                })
                s.append(g);
                g.drag();
            });
        </script>
    </body>
</html>